<template>
  <div class="custom-tree-container">
    <el-row type="flex" justify="space-around">
      <el-col :span="10" style="border:1px solid #ccc;border-radius:8px;padding:20px">
        <div class="block">
          <div>机构</div>
          <el-tree
            :data="dataList"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>{{ data.label }}</span>
              <span>
                <el-button
                  v-show="data.type!=='window'"
                  type="text"
                  size="mini"
                  @click="() => append(node,data)"
                >
                  添加
                </el-button>
                <el-button
                  v-show="data.type!='root'"
                  type="text"
                  size="mini"
                  @click="() => edite(node,data)"
                >
                  修改
                </el-button>
                <el-button
                  v-show="data.type!='root'"
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)"
                >
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>

      </el-col>
      <!--<el-col :span="10" style="border:1px solid #ccc;border-radius:8px;padding:20px">-->
      <!--<div v-html="textList" />-->
      <!--</el-col>-->
    </el-row>
    <!--<el-container style="padding:15px">-->
    <!--<el-button style="margin:0 auto" type="primary" @click="() => check()">查看数据</el-button>-->
    <!--</el-container>-->

    <el-dialog :visible.sync="addwinModelFlag" :title="title">
      <el-form ref="dataForm" label-position="left" label-width="70px" style="width: 50%;margin:0 auto">
        <el-form-item label="部门名称" prop="title">
          <el-input v-model="modelObj.window.name" />
        </el-form-item>
        <el-form-item label="工作人员" prop="title">
          <el-input v-model="modelObj.window.employee" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addWin()">保存</el-button>
        <el-button type="primary" @click="addwinModelFlag = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="editeFlag" :title="title">
      <el-form ref="dataForm" label-position="left" label-width="70px" style="width: 50%;margin:0 auto">
        <el-form-item label="部门名称" prop="title">
          <el-input v-model="modelObj.window.name" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editeInfo()">保存</el-button>
        <el-button type="primary" @click="editeFlag = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDeptTree, deptEdit, deptAdd, deptDelete } from '@/api/sysmanage'
export default {
  data() {
    return {
      addorgModelFlag: false,
      addhallModelFlag: false,
      title: '',
      addwinModelFlag: false,
      editeFlag: false,
      listLoading: true,
      dataList: [],
      textList: '',
      modelObj: {
        window: {
          name: '',
          employee: ''
        },
        hall: {
          name: ''
        },
        org: {
          name: ''
        }
      },
      nodeStore: '',
      dataStore: ''

    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      const queryData = {
        deptId: 0
      }
      getDeptTree(queryData).then(response => {
        const { data } = response
        this.dataList = [{
          'id': 0,
          'lable': '机构',
          'type': 'root',
          'children': data
        }]
        console.log('TCL: getData -> this.dataList', this.dataList)

        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    append(node, data) {
      this.editeFlag = false
      this.modelObj = {
        window: {
          name: '',
          employee: ''
        },
        hall: {
          name: ''
        },
        org: {
          name: ''
        }
      }
      this.dataStore = data
      this.nodeStore = node
    },
    addOrg() {
      const queryData = {
        orgName: this.modelObj.org.name
      }
      deptAdd(queryData).then(res => {
        const { code, message, data } = res
        if (code === '200') {
          this.$message({
            message: message,
            type: 'success'
          })
          this.addorgModelFlag = false
          const ID = data.id
          const name = this.modelObj.org.name
          const newChild = { id: ID, lable: name, type: 'org', children: [] }
          this.dataStore.children.push(newChild)
          this.$forceUpdate()
        } else {
          this.$message({
            message: message,
            type: 'warning'
          })
        }
      })
    },
    edite(node, data) {
      console.log('TCL: edite -> data', data)
      this.editeFlag = true
      this.dataStore = data
      this.nodeStore = node
      this.title = '编辑部门'
      this.modelObj.window.name = this.dataStore.lable
      this.modelObj.window.employee = this.dataStore.employee
      this.$forceUpdate()
    },
    editeInfo() {
      const queryData = {
        'id': this.dataStore.id,
        'orgName': this.modelObj.org.name
      }
      deptEdit(queryData).then(res => {
        const { code, message } = res
        if (code === '200') {
          this.$message({
            message: message,
            type: 'success'
          })
          this.dataStore.lable = this.modelObj.org.name
          this.editeFlag = false
        } else {
          this.$message({
            message: message,
            type: 'warning'
          })
        }
      })
    },
    remove(node, data) {
      const { id, type } = data
      deptDelete({ id }, type).then(res => {
        console.log('TCL: remove -> res', res)
        const { code, message } = res
        if (code === '200') {
          this.$message({
            message: message,
            type: 'success'
          })
          const parent = node.parent
          const children = parent.data.children || parent.data
          const index = children.findIndex(d => {
            d.id === data.id
          })
          children.splice(index, 1)
        } else {
          this.$message({
            message: message,
            type: 'warning'
          })
        }
      })
    },
    check() {
      this.textList = JSON.parse(JSON.stringify(this.dataList))
    }
  }
}
</script>

<style>
  .custom-tree-container{
    padding:10px 0
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
